<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ questnr[0].Questnr.questnr_name }}</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"> </script>
</head>
<body>
    <div>
    {{ questnr[0].Questnr.questnr_name }}
    </div>

    <form>
{% for option in questnr  %}
    <div>
    {{ option.Option.option_name }}  <input type="radio" name="choice" option_sequence="{{ option.Option.option_sequence}}" option_alpha="{{ option.Option.option_alpha}}"  questnr_id="{{ questnr[0].Questnr.questnr_id}}"  option_id="{{ option.Option.option_id }}" onchange="add_option(this)"  />

    {% endfor %}
        <a href="/questnr/{{ questnr[0].Questnr.questnr_id + 1 }}">next</a>
        <!--input type="button" onclick="commit_answer()" value="commit"/-->

{#        <button style="VISIBILITY: hidden" onclick="add_option()">提交问卷</button>#}
        <button style="VISIBILITY: visible" onclick="commit_answer()">提交问卷</button>
        </div>
    </form>


</body>

<script type="text/javascript">
    function add_option(inputUI) {
        if(inputUI.checked){

            if(!window.localStorage.option_list)
                window.localStorage.option_list = "{}";
            var option_list = JSON.parse(window.localStorage.option_list);
            option_list[$(inputUI).attr("questnr_id")] = $(inputUI).attr("option_alpha");
            window.localStorage.option_list = JSON.stringify(option_list);
        }
    }


    function commit_answer() {
        $.ajax({
    type: 'POST',
    url: '/receive_answer',
    data: window.localStorage.option_list, // or JSON.stringify ({name: 'jonas'}),
    success: function(data) {
{#        alert('data: ' + data);#}
{#        alert(JSON.parse(data));#}
        },
    error:function (data) {

    },

    contentType: "application/json",
    dataType: 'json'
});
    }
</script>
</html>
